<template>
  <fullScreenContainer :leftList="menuList" :rightList="rightList" :centerSpan="19" :showRight="false"
    title="湖南省农业优势特色产业集群信息系统" type="fullScreenContainer">
    <template slot="leftContent">
      <Panel key="jdfj" v-model="tabs_value" :tabs="tabs" @change="change" height="100%">
        <div class="jdfj-box">
          <div class="jdfj-left-box" v-for="item in cygk">
            <img :src="home" alt="" srcset="" />
            <div class="jdfj-right-box-1">
              <div class="right-top" style="justify-content: center;">
                <span class="number">{{ item.number }}</span>
                <span class="text">{{ item.unit }}</span>
              </div>
              <div class="right-bottom" style="text-align: center;">
                {{ item.name }}
              </div>
            </div>
          </div>
        </div>
        <div class="jdfj-tabs1">
          <tabs1 v-model="tabs1_value" :tabs="[{ name: '按区域分析', value: '1' }]"></tabs1>
        </div>
        <div class="jdfj-bar">
          <echartsDemo key="top" :initData="qyqyfx" :initChart="topChart"></echartsDemo>
        </div>
      </Panel>
    </template>

    <template slot="fullScreenMap">
      <div class="map-page-container">
        <Map ref="Map"></Map>
      </div>
    </template>
    <template slot="centerContent">
      <map-tools @iconChange="iconChange"></map-tools>
    </template>
  </fullScreenContainer>
</template>
<script>
import Map from '@/Iframe/kcgis3x.vue'
import MapTools from '@/layout/components/Center/index.vue'
import EchartsDemo from '@/echartsDemo/index.vue'
import menuList, { rightList } from './menu'
import home from './box1.png'
import echartsDemo from '@/echartsDemo/index.vue'
import tabs1 from '../templateBigScreen/tabs1.vue'
import tabs2 from '../templateBigScreen/tabs2.vue'
import pieChart from '../templateBigScreen/pieChart'
import topChart from '../templateBigScreen/topChart'
import barChart from './barChart'
import box2 from '../templateBigScreen/box2.vue'
import box3 from '../templateBigScreen/box3.vue'
import cselect from './Select/index.vue'
import scroll from '../templateBigScreen/scroll.vue'
import { getChartData, ztyztqk } from "@/apis/bigOneIndex";

export default {
  components: {
    Map,
    MapTools,
    tabs1,
    echartsDemo,
    box2,
    box3,
    tabs2,
    cselect,
    scroll,
  },

  data() {
    return {
      menuList,
      rightList,
      home,
      pieChart,
      barChart,
      topChart,
      tabs1_value: '1',
      select1_value: 2,
      tabs2_value: '1',
      tabs: [
        {
          name: '供需站点分析',
          value: '1',
        },
      ],
      tabs_value: '1',
      learDataColumnsConfg: [
        {
          label: '班级名称',
          prop: 'name',
          width: '25%',
          paddingLeft: '0px',
        },
        {
          label: '班主任',
          prop: 'class',
          width: '25%',
          paddingLeft: '0px',
        },
        {
          label: '评估',
          prop: 'content',
          width: '25%',
          paddingLeft: '0px',
        },
        {
          label: '实验',
          prop: 'datetiem',
          width: '25%',
          paddingLeft: '0px',
        },
      ],
      rowdata: [
        {
          name: '2022级计算机1班',
          class: 'yy1',
          content: 'xx',
          datetiem: '66.66',
        },
        {
          name: '2022级计算机1班',
          class: 'yy2',
          content: 'xx',
          datetiem: '66.66',
        },
        {
          name: '2022级计算机1班',
          class: 'yy3',
          content: 'xx',
          datetiem: '66.66',
        },
        {
          name: '2022级计算机1班',
          class: 'yy2',
          content: 'xx',
          datetiem: '66.66',
          pro: '40.66%',
          zh: '50.55%',
          sort: '4',
        },
        {
          name: '2022级计算机1班',
          class: 'yy2',
          content: 'xx',
          datetiem: '66.66',
        },
        {
          name: '2022级计算机1班',
          class: 'yy2',
          content: 'xx',
          datetiem: '66.66',
        },
        {
          name: '2022级计算机1班',
          class: 'yy3',
          content: 'xx',
          datetiem: '76.76',
        },
        {
          name: '2022级计算机1班',
          class: 'yy3',
          content: 'xx',
          datetiem: '76.76',
        },
        {
          name: '2022级计算机1班',
          class: 'yy3',
          content: 'xx',
          datetiem: '76.76',
        },
      ],
      cygk: [
        {
          number: '0',
          unit: '个',
          name: '供应站点',
        },
        {
          number: '0',
          unit: '个',
          name: '需求站点',
        },
      ],
      qyqyfx: [
        {
          executeOorgname: '安化县',
          zs: 36.11,
        },
        {
          executeOorgname: '保靖县',
          zs: 12.00,
        },
        {
          executeOorgname: '古丈县',
          zs: 17.50,
        },
        {
          executeOorgname: '桑植县',
          zs: 4.36,
        },
        {
          executeOorgname: '石门县',
          zs: 12.73,
        },
        {
          executeOorgname: '桃源县',
          zs: 11.64,
        },
        {
          executeOorgname: '新化县',
          zs: 5.65,
        },
        {
          executeOorgname: '沅陵县',
          zs: 16.00,
        },
      ],
    }
  },
  created() {
    this.getData();
  },
  methods: {
    change(value) {
      console.log(value, 'value')
    },
    text() { },
    iconChange(data) {
      debugger
      let layerTypeList = data.filter(item => {
        return item.checked;
      });
      let layerType = layerTypeList.map(item => item.value).join(",");
      this.layerType = layerType;
      this.getData(layerType);
    },
    getData(layerType) {
      this.getChartData1(layerType);
      this.getZtyztqk(layerType);
    },
    getZtyztqk(layerType) {
      let params = { "layerType": layerType };
      ztyztqk(params).then(res => {
        //executeOorgname,zs
        this.cygk[0].number = res.data.wlgyzd||0;
        this.cygk[1].number = res.data.wlxqzd||0;
      });
    },
    getChartData1(layerType) {
      let chartName = "物流专题-按区域分析";
      let params = { "layerType": layerType, "chartName": chartName };
      getChartData(params).then(res => {
        //executeOorgname,zs
        this.qyqyfx = [];
        res.data.forEach(e => {
          var data = { "executeOorgname": e.name, "zs": e.value }
          this.qyqyfx.push(data);
        });
      });
    },

    formatChartData(data) {
      let legendData = [];
      let seriesData = [];
      let result = {};
      data.forEach(e => {
        legendData.push(e.name);
        seriesData.push({ "name": e.name, "value": e.value });
      });
      result.legendData = legendData;
      result.xAxisData = legendData;
      result.seriesData = seriesData;
      return result;
    }
  },
  mounted() { },
}
</script>
<style scoped lang="scss">
.jdfj-box {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}

.table1-box {
  width: 100%;
}

.jdfj-tabs1 {
  margin-top: 32px;
}

.jdfj-tabs2 {
  margin-top: 18px;

  span {
    font-family: Source Han Sans;
    font-size: 12px;
    font-weight: normal;
    line-height: normal;
    text-transform: uppercase;
    letter-spacing: 2px;

    font-variation-settings: 'opsz' auto;
    font-feature-settings: 'kern' on;
    /* 文字色 */
    color: #c2e5ff;
    cursor: pointer;
    z-index: 0;
  }
}

.jdfj-left-box {
  width: 83px;
  height: 145px;
  border-radius: 5px;
  opacity: 1;

  /* 自动布局 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  background: linear-gradient(180deg,
      rgba(59, 214, 172, 0.1) 0%,
      rgba(59, 214, 172, 0) 100%);

  z-index: 0;

  .jdfj-right-box-1 {
    .right-top {
      margin-top: 26px;
      opacity: 1;
      /* 自动布局 */
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 5px;
      z-index: 0;

      .number {
        font-family: DIN;
        font-size: 24px;
        font-weight: bold;
        line-height: 24px;
        letter-spacing: 0em;

        font-variation-settings: 'opsz' auto;
        background: linear-gradient(180deg, #d5fff5 15%, #8cd9c5 84%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
        z-index: 0;
      }

      .text {
        opacity: 0.8;
        font-family: 思源黑体;
        font-size: 14px;
        font-weight: 350;
        line-height: 14px;
        letter-spacing: 0em;

        /* 纯白 */
        color: #ffffff;

        z-index: 1;
      }
    }

    .right-bottom {
      height: 21px;
      opacity: 1;

      font-family: 思源黑体;
      font-size: 14px;
      font-weight: normal;
      line-height: normal;
      text-transform: uppercase;
      letter-spacing: 1px;

      font-variation-settings: 'opsz' auto;
      font-feature-settings: 'kern' on;
      /* 文字白 */
      color: #ffffff;

      z-index: 1;
      margin-top: 10px;
    }
  }
}

.jdfj-tz {
  margin-top: 32px;
}

.jdfj-tb {
  width: 100%;
  height: 300px;
  margin-top: 16px;
}

.flex1 {
  margin-top: 20px;
}

.jdfj-total {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: center;
  margin-top: 18px;

  .text {
    /* 文字小 */
    font-family: Microsoft YaHei;
    font-size: 16px;
    font-weight: normal;
    line-height: 24px;
    letter-spacing: 0em;

    /* 文字色 */
    color: #d0fff2;

    z-index: 1;
  }

  .number {
    /* 数字1 */
    font-family: DIN;
    font-size: 36px;
    font-weight: bold;
    line-height: 36px;
    text-align: right;
    letter-spacing: 0px;

    background: linear-gradient(180deg, #d5fff5 15%, #8cd9c5 84%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    z-index: 2;
  }

  .unit {
    font-family: 思源黑体;
    font-size: 14px;
    font-weight: normal;
    line-height: 28px;
    letter-spacing: 0px;

    color: rgba(255, 255, 255, 0.6);

    z-index: 3;
  }
}

.jdfj-bar {
  margin-top: 18px;
  height: 552.68px;
  opacity: 1;

  /* 自动布局 */
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  flex-grow: 1;
  align-self: stretch;

  z-index: 2;
}
</style>
